<template>
    <div>
        <cvue-dialog
            :dialogVisible="addGroupVisible"
            title="添加分组"
            :isShowFoot="true"
            dialogWidth="500px"
            @handleOpen="openDialog"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="closeDialog"
            >
            <div  slot="dialogBody">
                <el-form label-width="120px">
                    <el-form-item label="名称" :required="true">
                        <el-input v-model="name" maxlength="8" show-word-limit></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
export default {
    components: {
        cvueDialog
    },
    computed: {
        addGroupVisible () {
            return this.$store.state.group.addGroupVisible
        },
        curDorm () {
            return this.$store.state.dorm.curDorm    
        },
         schoolId () {
          return this.$store.state.common.cookiesObj.schoolId
        }
    },
    data () {
        return {
            name: ''
        }
    },
    methods: {
        openDialog () {
            this.name = ''
        },
        confirmDialog () { 
             if (!this.name) {
                 this.$message.error('请输入名称')
                 return
             }
            var params = {
                schoolId: this.schoolId,
                dormitoryId: this.curDorm.id,
                groupName: this.name
            }
            this.$store.dispatch('group/addGroup', params).then(() => {
                this.$message.success('添加成功')
                this.closeDialog()
            })
        },
        closeDialog () {
          this.$store.state.group.addGroupVisible = false
        }
    }
}
</script>
<style scoped>

</style>
